<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8" />
<title>CommonUtils</title>
<link rel="shortcut icon" href="./image/toolbox.png" type="image/png">
<link rel="stylesheet" type="text/css" href="./css/common.css" />
</head>
<body>
	<div id="commonutil" style="height: 100%; width: 100%;overflow-y:auto;">
		<h2>{{appName}}</h2><br><br>
		<!-- 百度语音识别 -->
		<div class="cardContainer">
			<h4>{{method_list.baiduSpeech}}</h4>
			<input name="file" type="file" @change="audiofilechange" />
			<br><br>
			<span class="data-display bigdataarea" v-bind:title="method_result_data.baiduSpeechData">
			<pre>{{method_result_data.baiduSpeechData | json}}</pre></span><br>
		</div>
		<!-- 百度语图片别 -->
		<div class="cardContainer">
			<h4>{{method_list.baiduImage}}</h4><br><br>
			<input name="file" type="file" accept="image/jpeg, image/jpg, image/png" @change="imagefilechange" />
			<br><br>
			<span class="data-display bigdataarea" v-bind:title="method_result_data.baiduImageData">
			<pre>{{method_result_data.baiduImageData}}</pre>
			</span><br>
		</div>
		<!-- md5加密 -->
		<div class="cardContainer">
			<h4>{{method_list.md5}}</h4>
			<span>原始数据</span><br>
			<input id="origin_str" class="myinput" v-bind:title="method_result_data.md5_origin_str"
				v-model="method_result_data.md5_origin_str" v-bind:placeholder="method_result_data.md5_placeholder"/><br>
			<br>
			<button v-on:click="generatMd5" class="success">MD5</button>
			<br><br>
			<span class="data-display" id="md5_str">{{method_result_data.md5_md5_str}}</span>
		</div>
		<!-- 生成UUID -->
		<div class="cardContainer">
			<h4>{{method_list.uuid}}</h4>
			<button v-on:click="generateUUID" class="success">UUID</button>
			<br>
			<br>
			<span class="data-display">{{method_result_data.uuid_str}}</span>
		</div>
		<!-- 生成当前时间戳 -->
		<div class="cardContainer">
			<h4>{{method_list.currentTimeMillis}}</h4>
			<button v-on:click="getCurrentTimeMillis" class="success">currentTime</button>
			<br>
			<br>
			<span class="data-display">{{method_result_data.currentTimeMillisStr}}</span>
		</div>
	</div>
</body>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="./js/vue.2.5.17.js"></script>
<script src="./js/axios.0.12.0.min.js"></script>
<script src="./js/common.js"></script>
<script type="text/javascript">
	var CommonUtilApp = new Vue({
		el : "#commonutil",
		data : {
			appName : "my common utils",
			method_list : {
				md5 : "md5",
				uuid : "uuid",
				currentTimeMillis:"currentTime",
				baiduSpeech:"百度语音识别",
				baiduImage:"百度图片识别"
			},
			method_result_data : {
				md5_origin_str : "",
				md5_placeholder:"请输入要加密的数据",
				md5_md5_str : "",
				uuid_str : "",
				currentTimeMillisStr:"",
				baiduSpeechData:"",
				baiduImageData:""
			}
		},
		created : function(){
				var now = new Date();
				var timestamp = now.getTime();
				this.method_result_data.currentTimeMillisStr = timestamp;
				this.method_result_data.uuid_str = guid();
		},
		methods : {
			generatMd5 : function(event) {
				var vm = this;
				const origindata = vm.method_result_data.md5_origin_str;
				if (!origindata || origindata.length == 0) {
					alert("请输入需要加密的数据");
					return;
				}
				axios.get(hostname+"/util/md5?param="+vm.method_result_data.md5_origin_str)
		        .then(function (response) {
		        	vm.method_result_data.md5_md5_str = response.data;
		        })
		        .catch(function (error) {
		        	alert('Error! Could not reach the API. ' + error);
				});
			},
			generateUUID : function(event) {
				this.method_result_data.uuid_str = guid();
			},
			getCurrentTimeMillis : function(event) {
				var now = new Date();
				var timestamp = now.getTime();
				this.method_result_data.currentTimeMillisStr = timestamp;
			},
			audiofilechange: function(event) {
				var vm = this;
				let file = event.target.files[0];
				if (!file || file.length == 0) {
                    return;
				}
				vm.method_result_data.baiduSpeechData = "识别中,请稍后....";
		        let param = new FormData(); //创建form对象
		        param.append('f',file);//通过append向form对象添加数据
		        let config = {
		          headers:{'Content-Type':'multipart/form-data'}
		        }; //添加请求头
				axios.post(hostname+"/util/baiduspeech",param,config)
		          .then(response=>{
		            vm.method_result_data.baiduSpeechData = JSON.stringify(response.data, null, 4);
		          })
		          .catch(function (error) {
		        	  vm.method_result_data.baiduSpeechData = 'Error! Could not reach the API. ' + error;
			       })
			},
			imagefilechange: function(event) {
				var vm = this;
				let file = event.target.files[0];
				if (!file || file.length == 0) {
                    return;
				}
				vm.method_result_data.baiduImageData = "识别中,请稍后....";
		        let param = new FormData(); //创建form对象
		        param.append('f',file);//通过append向form对象添加数据
		        let config = {
		          headers:{'Content-Type':'multipart/form-data'}
		        }; //添加请求头
				axios.post(hostname+"/util/baiduImage",param,config)
		          .then(response=>{
		            vm.method_result_data.baiduImageData = JSON.stringify(response.data, null, 4);
		          })
		          .catch(function (error) {
		        	  vm.method_result_data.baiduSpeechData = 'Error! Could not reach the API. ' + error;
			      })
			}
		}

	});
	function S4() {
		return (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1);
	}
	function guid() {
		return (S4() + S4() + "-" + S4() + "-" + S4() + "-" + S4() + "-" + S4()
				+ S4() + S4());
	}
	function refreshDateTime() {
		var now = new Date();
		var timestamp = now.getTime();
		var year = now.getFullYear();
		var month = now.getMonth() + 1;
		var day = now.getDate();
		var hour = now.getHours();
		var min = now.getMinutes();
		var sec = now.getSeconds();
		var minsec = now.getMilliseconds();
		var fulltime = year + "-" + month + "-" + day + " " + hour + ":" + min + ":" + sec + "." + minsec;
		return fulltime;
	}
</script>
</html>